<script setup>
//导入axios的实例
import axiosApi from './http/index.js'
import {ref,onBeforeMount} from "vue";
//因为要接收的数据是数组，所以默认值为空数组
const users = ref([])

//获取远程数据的函数
const getData = ()=>{
  //发送请求获取数据
  axiosApi.get('https://jsonplaceholder.typicode.com/users')
      .then(resp=>{ //获取数据成功执行的代码
        console.log('结果:',resp)
        //将返回的结果进行赋值
        // users.value = resp.data
        users.value = resp
      })
      .catch(error=>{ //请求失败要执行的代码
        console.log('错误：',error)
      })
}
//钩子函数目的是为了在组件挂载前去获取远程数据
onBeforeMount(()=>{
    //调用函数
    getData()
})
</script>

<template>
    <div><button @click="getData">获取远程数据</button></div>
    <table width="100%" border="1">
        <tr>
          <td>编号</td>
          <td>姓名</td>
          <td>用户名</td>
          <td>地址</td>
        </tr>
      <tr v-for="user in users">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.username}}</td>
        <td>{{user.address}}</td>
      </tr>
    </table>
</template>

<style scoped>

</style>